<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			:root {
			  --primary-color: hsl(171, 100%, 41%);
			  --success-color: hsl(141, 53%, 53%);
			  --danger-color: hsl(348, 86%, 61%);
			}
			
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  font-family: Lato, sans-serif;
			  background: #eceffc;
			}
			
			.btn {
			  position: relative;
			  padding: 0.375rem 0.75rem;
			  font-size: 1rem;
			  line-height: 1.5;
			  color: #212121;
			  text-decoration: none;
			  background-color: white;
			  border: transparent;
			  border-radius: 3px;
			  outline: transparent;
			  cursor: pointer;
			  -webkit-user-select: none;
			     -moz-user-select: none;
			      -ms-user-select: none;
			          user-select: none;
			  white-space: nowrap;
			  transition: 0.25s;
			}
			.btn-danger {
			  color: white;
			  background-color: var(--danger-color);
			}
			.btn-danger:hover {
			  background-color: #ee2049;
			}
			.btn-round {
			  border-radius: 30px;
			}
			.btn-fill {
			  overflow: hidden;
			}
			.btn-fill-left::before {
			  transform: translateX(100%);
			}
			.btn-fill-right::before {
			  transform: translateX(-100%);
			}
			.btn-fill::before {
			  position: absolute;
			  content: "";
			  top: 0px;
			  left: 0px;
			  width: 100%;
			  height: 100%;
			  border-radius: inherit;
			  transition: 0.4s cubic-bezier(0.75, 0, 0.25, 1);
			}
			.btn-fill::after {
			  position: relative;
			  content: attr(data-text);
			  transition: 0.4s ease;
			}
			.btn-fill:hover::before {
			  transform: translateX(0);
			}
			.btn-fill:hover::after {
			  color: white !important;
			}
			
			.modal {
			  position: fixed;
			  top: 0;
			  left: 0;
			  bottom: 0;
			  right: 0;
			  z-index: 999;
			  color: white;
			  background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
			  border: transparent;
			  border-radius: 12px;
			  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
			  -webkit-animation: show-modal 0.5s ease forwards;
			          animation: show-modal 0.5s ease forwards;
			}
			.modal::-webkit-backdrop {
			  background: rgba(0, 0, 0, 0.4);
			  -webkit-backdrop-filter: blur(3px);
			          backdrop-filter: blur(3px);
			}
			.modal::backdrop {
			  background: rgba(0, 0, 0, 0.4);
			  -webkit-backdrop-filter: blur(3px);
			          backdrop-filter: blur(3px);
			}
			.modal .model-icon {
			  margin-bottom: 1.25rem;
			  opacity: 0;
			  -webkit-animation: show-modal-icon 0.5s ease 0.2s forwards;
			          animation: show-modal-icon 0.5s ease 0.2s forwards;
			}
			.modal .modal-content {
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  width: 300px;
			  padding: 1em;
			}
			.modal .modal-content .modal-title {
			  margin-top: 0;
			  margin-bottom: 1.2rem;
			  opacity: 0;
			  -webkit-animation: show-modal-text 0.5s ease 0.35s forwards;
			          animation: show-modal-text 0.5s ease 0.35s forwards;
			}
			.modal .modal-content .modal-description {
			  margin: 0;
			  opacity: 0;
			  -webkit-animation: show-modal-text 1s ease 0.5s forwards;
			          animation: show-modal-text 1s ease 0.5s forwards;
			}
			.modal .modal-content .modal-options {
			  margin-top: 1rem;
			  display: flex;
			  justify-content: space-around;
			}
			.modal .modal-content .modal-options .option {
			  padding: 0 2em;
			  margin: 0.3em;
			  font-size: 20px;
			  font-weight: 700;
			  line-height: 2;
			}
			.modal .modal-content .modal-options .confirm {
			  opacity: 0;
			  -webkit-animation: show-modal-option 0.5s ease 0.65s forwards;
			          animation: show-modal-option 0.5s ease 0.65s forwards;
			}
			.modal .modal-content .modal-options .confirm::before {
			  background: var(--success-color);
			}
			.modal .modal-content .modal-options .confirm::after {
			  color: var(--success-color);
			}
			.modal .modal-content .modal-options .cancel {
			  opacity: 0;
			  -webkit-animation: show-modal-option 0.5s ease 0.8s forwards;
			          animation: show-modal-option 0.5s ease 0.8s forwards;
			}
			.modal .modal-content .modal-options .cancel::before {
			  background: var(--danger-color);
			}
			.modal .modal-content .modal-options .cancel::after {
			  color: var(--danger-color);
			}
			
			@-webkit-keyframes show-modal {
			  from {
			    transform: scale(0.8);
			  }
			  50% {
			    transform: scale(1.1);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			
			@keyframes show-modal {
			  from {
			    transform: scale(0.8);
			  }
			  50% {
			    transform: scale(1.1);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			@-webkit-keyframes show-modal-icon {
			  from {
			    transform: scale(0.4);
			  }
			  50% {
			    transform: scale(1.2);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			@keyframes show-modal-icon {
			  from {
			    transform: scale(0.4);
			  }
			  50% {
			    transform: scale(1.2);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			@-webkit-keyframes show-modal-text {
			  from {
			    transform: scale(0.6);
			  }
			  50% {
			    transform: scale(1.2);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			@keyframes show-modal-text {
			  from {
			    transform: scale(0.6);
			  }
			  50% {
			    transform: scale(1.2);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			@-webkit-keyframes show-modal-option {
			  from {
			    transform: scale(0.4);
			  }
			  50% {
			    transform: scale(1.2);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
			@keyframes show-modal-option {
			  from {
			    transform: scale(0.4);
			  }
			  50% {
			    transform: scale(1.2);
			    opacity: 1;
			  }
			  to {
			    transform: scale(1);
			    opacity: 1;
			  }
			}
		</style>
	</head>
	<body>
		<dialog id="confirm-modal" class="modal">
		  <div class="modal-content">
		    <svg t="1574164208713" class="model-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5819" width="63" height="63"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM512 877.714286c-40.228571 0-73.142857-32.914286-73.142857-73.142857s32.914286-73.142857 73.142857-73.142857 73.142857 32.914286 73.142857 73.142857S552.228571 877.714286 512 877.714286zM585.142857 512c0 40.228571-32.914286 73.142857-73.142857 73.142857s-73.142857-32.914286-73.142857-73.142857L438.857143 219.428571c0-40.228571 32.914286-73.142857 73.142857-73.142857s73.142857 32.914286 73.142857 73.142857L585.142857 512z" p-id="5820" fill="white"></path></svg>
		    <h2 class="modal-title">Are you sure?</h2>
		    <p class="modal-description">
		      You can't undo this action.
		    </p>
		    <div class="modal-options">
		      <button
		        class="btn btn-round btn-fill btn-fill-left option confirm"
		        data-text="Yes"
		        onclick="document.querySelector('#confirm-modal').close()"
		      ></button>
		      <button
		        class="btn btn-round btn-fill btn-fill-right option cancel"
		        data-text="No"
		        onclick="document.querySelector('#confirm-modal').close()"
		      ></button>
		    </div>
		  </div>
		</dialog>
		<form action="javascript:void(0);">
		  <button
		    class="btn btn-danger"
		    onclick="document.querySelector('#confirm-modal').showModal()"
		  >
		    Delete history
		  </button>
		</form>

	</body>
</html>
